<template>
    <div class="Box">
        <div class="imgBox">
            <img :src="props.cover"/>
            <span>{{ props.count }}篇</span>
        </div>
        <div class="info">
            <p>{{ props.name }}</p>
            <p>{{ props.summary?props.summary:'作者很懒，还木有写简介.....((/- -)/' }}</p>
            <p>
                <span>{{ formatNum(props.read) }}浏览</span>
                <span>更新于{{ formatYMD(props.update_time) }}</span>
            </p>
        </div>
    </div> 
</template>

<script lang="ts" setup>
import { formatNum,formatYMD } from '@/utils/format'

interface Props{
    id:number
    cover:string
    count:number  //数量
    name:string
    summary:string
    read:number     //浏览量
    update_time:number

}
const props = defineProps<Props>()
</script>

<style lang="scss" scoped>
p{
    margin: 0;
    padding: 0;
}
.Box{
    display: flex;
    align-items: start;
    gap: 15px;
    width: 100%;
    height: 100%;
}
.imgBox{
    width: 120px;
    height: 100%;
    border-radius: 4px;
    position: relative;
    @include flexRowCenter;
    &::after{
        content: "";
        position: absolute;
        right: -5px;
        background: #e4e4e4;
        height: 97%;
        width: 4px;
        border-top-right-radius: 50px;
        border-bottom-right-radius: 50px;
    }
    & img:nth-child(1){
        width: 100%;
        height: 100%;
        border-radius: 4px;
    }
    & span:last-child{
        position: absolute;
        bottom: 5px;
        right: 8px;
        font-size: 12px;
        padding: 2px 5px;
        background: rgb(0, 0, 0,0.6);
        color: rgb(255, 255, 255,0.8);
        border-radius: 4px;
    }
}
.info{
    width: calc(100% - 135px);
    color: #222222;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 15px;
    & p:nth-child(1){
        font-size: 18px;
        width: 100%;
        text-align: left;
    }
    & p:nth-child(2){
        font-size: 12px;
        line-height: 18px;
        max-height: 36px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    & p:nth-child(3){
        font-size: 12px;
        line-height: 18px;
        display: flex;
        gap: 15px;
    }
}
</style>